<template>
  <a-drawer v-model:visible="visible" width="80%"  class="footer-center">

    <template #title>
      <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
        <div>托盘</div>
      </div>
    </template>
    <a-spin :loading="dataLoading" tip="加载中..." class="w-full">
    <a-form v-if="step == 1">
      <a-form-item field="name" label="托盘分类">
        <button @click="trayType=1" v-bind:class="{'arco-btn-secondary':trayType==2}" class="arco-btn-primary arco-btn-size-medium" type="button"> 按地址</button>
        <button @click="trayType=2" v-bind:class="{'arco-btn-secondary':trayType==1}" class="arco-btn-primary arco-btn-size-medium" type="button"> 按承运商</button>
      </a-form-item>
    </a-form>
  </a-spin>
    <div v-if="step == 2">
      <tray-list ref="trayList"></tray-list>
    </div>
    
    <template #footer>
      <a-button type="primary" @click="changeStep(2)"  v-if="step == 1">下一步</a-button>
      <a-button type="primary" @click="changeStep(1)"  v-if="step == 2">上一步</a-button>
      <!-- <a-button type="primary" status="success" v-if="step == 2">去列表查看</a-button> -->
    </template>
  </a-drawer>
</template>

<script setup>
import {computed, nextTick, provide, ref, watch,inject} from "vue";
import MaForm from "@cps/ma-crud/components/form.vue";
import tray from '@/api/warehouse/tray'
import TrayList from '@/views/warehouse/tray/index.vue'
const record = ref({})
const trayList = ref()
const visible = ref(false)
const trayType = ref(1)
const step = ref(1)
const dataLoading = ref(false)
const open = (data)=>{
  visible.value = true
  record.value = data
}

const changeStep = (value) =>{
  if(value == 2){
    setTray()
  }else{
    step.value = value
  }
}

const setTray = async ()=>{
  dataLoading.value = true
  let res = await tray.createTray({type:trayType.value},record.value.id)
  if(!res.success){
    return;
  }
  dataLoading.value = false
  step.value = 2
}


provide('record',record)

defineExpose({ open })

</script>

<style >
  .footer-center .arco-drawer-footer{
    text-align: center;
  }
</style>